<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
            border:0;
        }

        html, body, ul{
            width: 100%;
            height: 100%;
        }

        #ul li{
            width: 100%;
            height: 100%;
            text-align: center;
            font-size: 30px;
            /*background-color: red;*/
            color: #fff;
        }

        #ol{
            width: 80px;
            background-color: #ccc;
            position: fixed;
            left: 50px;
            top: 200px;
            border: 1px solid #fff;
        }

        #ol li{
            text-align: center;
            line-height: 30px;
            border-bottom: 1px solid #fff;
            color: #fff;
            cursor: pointer;
        }

        #ol li.current{
            background-color: orangered;
        }
    </style>
</head>
<body>
    <!--GPS-->
    <ol id="ol">
        <li class="current">第1层</li>
        <li>第2层</li>
        <li>第3层</li>
        <li>第4层</li>
        <li>第5层</li>
    </ol>
    <!--楼层-->
    <ul id="ul">
        <li>第1层内容</li>
        <li>第2层内容</li>
        <li>第3层内容</li>
        <li>第4层内容</li>
        <li>第5层内容</li>
    </ul>
<script src="js/myFunc.js"></script>
<script>
    window.onload = function () {
        // 1. 获取需要的标签
        var ol = $('ol'), ul = $('ul');
        var ulLis = ul.children;
        var olLis = ol.children;
        var isClick = false;


        // 2. 上色
        var colorArr = ['red', 'green', 'blue', 'purple', 'yellow'];
        for(var i=0; i<colorArr.length; i++){
            ulLis[i].style.backgroundColor = colorArr[i];
        }
        
        // 3. 监听GPS的点击
        for(var j=0; j<olLis.length; j++){
            (function (index) {
                 var olLi = olLis[index];
                 // 3.1 点击切换
                olLi.onmousedown = function () {

                    isClick = true;

                    for(var i = 0; i<olLis.length; i++){
                        olLis[i].className = "";
                    }
                    this.className = "current";

                    // 3.2 让内容滚动起来
                    // document.documentElement.scrollTop = index * client().height;
                    buffer(document.documentElement, {scrollTop: index * client().height}, function () {
                      isClick = false;
                    });
                }
            })(j);
        }
        
        // 4.监听滚动
        window.onscroll = function () {
           if(!isClick){
               console.log(111111);
               // 4.1 获取滚动产生的高度
               var roll = Math.ceil(scroll().top);
               // 4.2 遍历
               for(var i=0; i<olLis.length; i++){
                   // 4.3 判断
                   if(roll >= ulLis[i].offsetTop){
                       for(var j=0; j<olLis.length; j++){
                           olLis[j].className = "";
                       }
                       olLis[i].className = "current";
                   }
               }
           }
        }
    }
</script>
</body>
</html>